<template>
  <div id="box">
    <h2><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2106576569,1964628658&fm=15&gp=0.jpg" alt=""></h2>
    <van-cell-group>
      <van-cell-group>
        <van-field
        v-model="username"
          value=""
          placeholder="用户名"
          left-icon="contact"
          @input="val"
        />
      </van-cell-group>

      <van-field
        v-model="password"
        type="password"
        left-icon="closed-eye"
        placeholder="密码(请输入6-20的数字,字母,汉字)"
        @input="vall"
      />
      <van-field
        v-model="password2"
        type="password"
        left-icon="closed-eye"
        placeholder="确认密码"
        @input="valll"
      />
    </van-cell-group>
    <div class="zu">
    <van-icon name="question-o" />
    <span>忘记密码?</span>
    <span v-tap='{methods:login}' >登录<van-icon name="arrow" /></span>
    </div>
     <van-button type="default"  v-tap='{methods:login1}'>{{tit}}</van-button>
    <van-checkbox v-model="checked" checked-color="#f9e00e">同意<span v-tap="{methods:fu}" class="fu">服务协议</span></van-checkbox>
  </div>


</template>

<script>
  import * as api from '../api/getProlist'
  export default {
    name:'Reg',
    data(){
      return{
        username:'',
        password:'',
        password2:'',
        rusername:'',
        rpassword:'',
        list:'',
        list1:'',
        tit:'注册',
        checked:true,
      }
    },
    methods:{
      login1(){
        if(this.list1==0&&this.list==1&&this.password==this.password2){
          this.$router.push('/Login')
          this.tit='注册'
        }else{
          this.tit='用户名已存在'
        }
      },
      login(){
        this.$router.push('/Login')
      },
      fu(){
        this.$router.push('/sla')
      },
      val(){
        this.rusername=this.username
        if(!/^([\u4e00-\u9fa5]{1,4})|([A-Za-z0-9_]{1,16})|([a-zA-Z0-9_\u4e00-\u9fa5]{1,16})$/.test(this.rusername)){
          console.log('用户名格式不正确')
        }
      },
      vall(){
        this.rpassword=this.password
        if(/^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[._~!@#$^&*])[A-Za-z0-9._~!@#$^&*]{6,20}$/.test(this.rpassword)){
          console.log('密码格式不正确')
        }
      },
      valll(){
        if(this.password!=this.password2){
          this.tit='密码不一致'

        }else{
          this.tit='注册'
        }

      }
    },
    updated(){
      api.getReg({username:this.rusername,password:this.password}).then((data)=>{
        // console.log(data.data.code)
        this.list=data.data.code
      });
      api.getCheck({username:this.rusername}).then((data)=>{
        this.list1=data.data.code
        // console.log(data.data.code)
      })
    },
    }
</script>

<style scoped="">
  #box{
    padding:10px 24px;
    text-align: center;
  }
  img{
    width: 80px;
    height: 80px;
  }
  .van-field{
      border-bottom: 1px solid #ccc;
      font-size: 18px;
   }
   .zu span:nth-of-type(1){
     margin-left: -200px;
   }
   .zu{
     height: 40px;
     font-size: 14px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: #777;
   }
   button{
     margin-top: 140px;
     width: 300px;
     background: #ddd;
     font-size: 20px;
     line-height: 40px;
     color: #888;
   }
   .fu{
     text-decoration: underline;
   }
   .van-checkbox{
     width: 100px;
     margin: 20px auto;

   }

</style>
